<template>
    <div>
        {{subject_id}}{{subject_name}}
        <!--        {{recentVideoList}}-->
        <div style="display: flex;border-bottom: 1px solid gray;padding: 10px 0px" v-for="item in recentVideoList">
            <img width="160" :src="item.bannerPic" alt="">
            <div style="display: flex;flex-direction: column;justify-content: space-between;width: 100%">
                <p>{{item.name}}</p>
                <p>已看 {{}},总时长{{item.duration}}</p>
                <div style="display: flex;justify-content: flex-end">
                    <el-button style="text-align: right" @click="continueStudy(item)">继续学习</el-button>
                </div>
            </div>
        </div>
        <div v-if="recentVideoList.pagination">
            <el-pagination
                    background
                    v-model:currentPage="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="recentVideoList.pagination.count"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
    import {reactive, toRefs} from 'vue'
    import {useRouter} from "vue-router";
    import {videoMyCoursesList} from "@/api/api";

    export default {
        name: "myCourse",
        props: {
            subject_id: {
                type: Number
            },
            subject_name: {
                type: String
            }
        },
        setup(props) {
            let router = useRouter();

            let data = reactive({
                recentVideoList: [],
                pageSize: 2,
                currentPage: 1,
            })

            let getRecentVideoList = () => {
                console.log('最近在学课程id参数',localStorage.getItem('activeCourse'));
                videoMyCoursesList({courseID: localStorage.getItem('activeCourse'),page:data.currentPage,pageSize:data.pageSize}).then(res => {
                    console.log('最近在学视频列表', res)
                    data.recentVideoList = res.data;
                })
            }
            getRecentVideoList()

            const handleSizeChange = (val) => {
                console.log(`${val} items per page`)
                data.pageSize = val;
                getRecentVideoList();
            }
            const handleCurrentChange = (val) => {
                console.log(`current page: ${val}`)
                data.currentPage = val;
                getRecentVideoList();
            }

            let continueStudy = (item) =>{
                console.log(item)
                router.push({name:'VideoPlayer',params:{subject_id:localStorage.getItem('activeCourse'),subject_name:localStorage.getItem('activeCourseName'),id:item.id,vid:0}})
            }
            return {
                handleSizeChange,
                handleCurrentChange,
                ...toRefs(data),
                continueStudy
            }
        }
    }
</script>

<style scoped>

</style>
